１．Lightning Component作成
quickcontact.cmp
<aura:component controller="QuickContactController" implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickAction">
<aura:attribute name="account" type="Account" />
<aura:attribute name="newContact" type="Contact"
default="{ 'sobjectType': 'Contact' }" /> <!-- default to empty record -->
<aura:attribute name="hasErrors" type="Boolean"
description="Indicate if there were failures when validating the contact." />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!-- Display a header with details about the account -->
<div class="slds-page-header" role="banner">
<p class="slds-text-heading--label">{!v.account.Name}</p>
<h1 class="slds-page-header__title slds-m-right--small
slds-truncate slds-align-left">Create New Contact</h1>
</div>
<!-- Display form validation errors, if any -->
<aura:if isTrue="{!v.hasErrors}">
<div class="recordSaveError">
<ui:message title="Error" severity="error" closable="true">
The new contact can't be saved because it's not valid.
Please review and correct the errors in the form.
</ui:message>
</div>
</aura:if>
<!-- Display the new contact form -->
<div class="slds-form--stacked">
<div class="slds-form-element">
<label class="slds-form-element__label"
for="contactFirstName">First Name: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="contactFirstName"
value="{!v.newContact.FirstName}" required="true"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label"
for="contactLastName">Last Name: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="contactLastName"
value="{!v.newContact.LastName}" required="true"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="contactTitle">Title: </label>
<div class="slds-form-element__control">
<ui:inputText class="slds-input" aura:id="contactTitle"
value="{!v.newContact.Title}" />
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label"
for="contactPhone">Phone Number: </label>
<div class="slds-form-element__control">
<ui:inputPhone class="slds-input" aura:id="contactPhone"
value="{!v.newContact.Phone}" required="true"/>
</div>
</div>
<div class="slds-form-element">
<label class="slds-form-element__label" for="contactEmail">Email: </label>
<div class="slds-form-element__control">
<ui:inputEmail class="slds-input" aura:id="contactEmail"
value="{!v.newContact.Email}" />
</div>
</div>
<div class="slds-form-element">
<ui:button label="Cancel" press="{!c.handleCancel}"
class="slds-button slds-button--neutral" />
<ui:button label="Save Contact" press="{!c.handleSaveContact}"
class="slds-button slds-button--brand" />
</div>
</div>
</aura:component>２．Lightning Controller作成
quickcontactController.js
({
doInit : function(component, event, helper) {
// Prepare the action to load account record
var action = component.get("c.getAccount");
action.setParams({"accountId": component.get("v.recordId")});
// Configure response handler
action.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state === "SUCCESS") {
component.set("v.account", response.getReturnValue());
} else {
console.log('Problem getting account, response state: ' + state);
}
});
$A.enqueueAction(action);
},
handleSaveContact: function(component, event, helper) {
if(helper.validateContactForm(component)) {
component.set("v.hasErrors", false);
// Prepare the action to create the new contact
var saveContactAction = component.get("c.saveContactWithAccount");
saveContactAction.setParams({
"contact": component.get("v.newContact"),
"accountId": component.get("v.recordId")
});
// Configure the response handler for the action
saveContactAction.setCallback(this, function(response) {
var state = response.getState();
if(component.isValid() && state === "SUCCESS") {
// Prepare a toast UI message
var resultsToast = $A.get("e.force:showToast");
resultsToast.setParams({
"title": "Contact Saved",
"message": "The new contact was created."
});
// Update the UI: close panel, show toast, refresh account page
$A.get("e.force:closeQuickAction").fire();
resultsToast.fire();
$A.get("e.force:refreshView").fire();
}
else if (state === "ERROR") {
console.log('Problem saving contact, response state: ' + state);
}
else {
console.log('Unknown problem, response state: ' + state);
}
});
// Send the request to create the new contact
$A.enqueueAction(saveContactAction);
}
else {
// New contact form failed validation, show a message to review errors
component.set("v.hasErrors", true);
}
},
handleCancel: function(component, event, helper) {
$A.get("e.force:closeQuickAction").fire();
}
})３．Lightning Helper作成
quickcontactHelper.js
({
validateContactForm: function(component) {
var validContact = true;
// First and Last Name are required
var firstNameField = component.find("contactFirstName");
if($A.util.isEmpty(firstNameField.get("v.value"))) {
validContact = false;
firstNameField.set("v.errors", [{message:"First name can't be blank"}]);
}
else {
firstNameField.set("v.errors", null);
}
var lastNameField = component.find("contactLastName");
if($A.util.isEmpty(lastNameField.get("v.value"))) {
validContact = false;
lastNameField.set("v.errors", [{message:"Last name can't be blank"}]);
}
else {
lastNameField.set("v.errors", null);
}
// Verify we have an account to attach it to
var account = component.get("v.account");
if($A.util.isEmpty(account)) {
validContact = false;
console.log("Quick action context doesn't have a valid account.");
}
// TODO: (Maybe) Validate email and phone number
return(validContact);
}
})４．取引先でアクション追加
オブジェクト名 ： 取引先
アクション種別 ： Lightning コンポーネント
Lightning コンポーネント ： c. quickcontact
高さ ： 250ピクセル
表示ラベル ： Quick Contact
名前 ： Quick_Contact
５．取引先のページレイアウトにLightningアクションを追加
６．Lightning画面にて取引先の詳細画面で、「Quick Contact」アクション押下する。
